<template>
	<div class="changeName">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="nameInput">
			<input type="text" placeholder="请输入注册的手机号" v-model='phonenumber' readonly="readonly">
			<input type="text" placeholder="请输入更改的昵称" v-model='username'>
			<p>
				<span @click='cancelChange'>取消修改</span>
				<span @click='confirmChange'>确认修改</span>
			</p>
		</div>
	</div>
</template>
<script>
import ShopHeader from "../../../components/shopheader"
export default {
		name:'changeName',
		data(){
			return{
				phonenumber:JSON.parse(this.$cookie.get('test')).phonenumber,
				username:'',
				dataArr:{
				isInput:false,
				iconArr:[
					{
						iconLeft:"icon-zuojiantou",
						iconRight:""
					}
				],
				placeholder:"修改昵称",
				aimUrl:"/mine/personcenter",
				rightUrl:''
			}
			}
		},
		components:{
			ShopHeader
		},
		methods:{
			cancelChange(){
				this.username = ''
				this.$router.push('/mine/personcenter')
			},
			confirmChange(){
				if(this.username != '' ){
					var data = {phonenumber:this.phonenumber,
						username:this.username}
					const url = this.HOST + '/update'
					this.$axios.post(url,data)
					.then(res => {
                		// console.log(res.data)
                		if(res.data.code == '400'){
                			alert('修改失败')
                		}else{
                			alert('修改成功')
                			var shuju = JSON.parse(this.$cookie.get('test'))
                			shuju.username = this.username
                			this.$cookie.set("test",JSON.stringify(shuju),7)
                			// console.log(shuju)
                			setTimeout(function(){
                      			this.$router.push('/mine/personcenter')
                  			}.bind(this),1000)
                		}
                	})
                	.catch(error => {
                		console.log(error)
                	})
				}
			}
		}
}
</script>
<style scoped lang="less">
.changeName{
	width: 100%;
	background-color: #e6e6e6;
	min-height: 1334 / 100rem;
	padding: 20 / 100rem;
	box-sizing: border-box;
	.top-zhanwei{
		width: 100%;
		height: 88 / 2 / 50rem;
	}
	.nameInput{
		width: 100%;
		border: none;
		input{
			width: 650 / 100rem;
			height: 80 / 100rem;
			display: block;
			margin-top: 80 / 100rem;
			margin-left: 30 / 100rem;
			margin-bottom: 50 / 100rem;
			border: none;
			outline: none;
			border-radius: 8 / 100rem;
			text-indent: 54 / 100rem;
			font-size: 30 / 100rem;
			color: rgba(0, 0, 0, 0.5);
			font-weight: 400;
		}
		p{
			margin-left: 30 / 100rem;
			margin-right: 30 / 100rem;
			span{
				display: inline-block;
				width: 280 / 100rem;
				height: 100 / 100rem;
				background-color: #ff5555;
				text-align: center;
				line-height: 100 / 100rem;
				font-size: 38 / 100rem;
				border: none;
				border-radius: 10 / 100rem;
			}
			span:nth-child(1){
				margin-right: 80 / 100rem;
				color: #ff5555;
				background-color: #fff;
			}
			span:nth-child(2){
				color: #fff;
			}
		}
	}
}
</style>